<template>
  <div class="coupon">
    <h5>商户台账查询</h5>
    <div class="coupon-header">
      <div class="search-inp">
        <div class="item">
          <span class="item-text">商户信息</span>
          <el-input
            v-model="shxx"
            placeholder="请输入商家营业执照名称"></el-input>
        </div>
        <div class="item">
          <span class="item-text">商户号</span>
          <el-input
            v-model="shh"
            placeholder="请输入zg开头的用户号"></el-input>
        </div>
        <div class="item">
          <span class="item-text">业务类型</span>
          <el-select v-model="ywlx" placeholder="请选择">
            <el-option
              v-for="item in searchoptions2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="button-box">
        <el-button type="primary" plain @click="searchClick">查询</el-button>
        <el-button type="info" plain @click="emptyClick">清空</el-button>
        <el-button type="primary" plain @click="downloadClick">下载</el-button>
      </div>
    </div>
    <div class="tabs">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column prop="shh" label="商户号"></el-table-column>
        <el-table-column prop="shxx" label="商户信息"></el-table-column>
        <el-table-column label="业务类型">
          <template slot-scope="scope">
            <span v-if="scope.row.ywlx == 1" type="text">商超</span>
            <span v-else-if="scope.row.ywlx == 2" type="text">酒店</span>
            <span v-else-if="scope.row.ywlx == 3" type="text">直播带货</span>
            <span v-else type="text">推广奖励</span>
          </template>
        </el-table-column>
        <el-table-column prop="kjsye" label="可结算余额"></el-table-column>
        <el-table-column prop="clzje" label="处理中余额"></el-table-column>
        <el-table-column prop="ljjyje" label="累计交易金额"></el-table-column>
        <el-table-column prop="ljjysxf" label="累计交易手续费"></el-table-column>
        <el-table-column prop="ljjybs" label="累计交易笔数"></el-table-column>
        <el-table-column prop="ljptfwf" label="累计平台服务费"></el-table-column>
        <el-table-column prop="ljrj" label="累计入金" width="80"></el-table-column>
        <el-table-column prop="ljcj" label="累计出金" width="80"></el-table-column>
        <el-table-column prop="ljhfsxf" label="累计划付手续费"></el-table-column>
        <el-table-column prop="sjshmc" label="上级商户名称"></el-table-column>
        <el-table-column label="出入明细" width="80">
          <template slot-scope="scope">
            <el-button @click="examine(scope.row)" type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    </div>
    <!-- 弹窗 -->
    <div class="mask" v-show="masknum">
      <div class="content content1">
        <p style="font-size: 22px;display:flex;justify-content: space-between;">
          <span>查看出入明细详情</span>
          <span @click="cancel">x</span>
        </p>
        <div class="content1-list">
          <div>
            <span>日期:</span>
            <el-date-picker
            style="margin-left:10px;"
              v-model="timeArr"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <el-select v-model="typeDetails" placeholder="请选择">
            <el-option
              v-for="item in searchoptions1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <div>
            <el-button type="primary" plain>查询</el-button>
            <el-button type="info" plain>清空</el-button>
          </div>
        </div>
        <div class="item-content">
           <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column prop="shxx" label="商户信息"></el-table-column>
              <el-table-column label="业务类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.ywlx == 1" type="text">商超</span>
                  <span v-else-if="scope.row.ywlx == 2" type="text">酒店</span>
                  <span v-else-if="scope.row.ywlx == 3" type="text">直播带货</span>
                  <span v-else type="text">推广奖励</span>
                </template>
              </el-table-column>
              <el-table-column prop="kjsye" label="日期"></el-table-column>
              <el-table-column prop="kjsye" label="余额"></el-table-column>
              <el-table-column prop="clzje" label="交易金额"></el-table-column>
              <el-table-column prop="ljjysxf" label="交易手续费"></el-table-column>
              <el-table-column prop="ljptfwf" label="平台服务费"></el-table-column>
              <el-table-column prop="ljrj" label="入金" width="70"></el-table-column>
              <el-table-column prop="ljcj" label="出金" width="70"></el-table-column>
              <el-table-column prop="ljhfsxf" label="划付手续费"></el-table-column>
              <el-table-column prop="sjshmc" label="上级商户名称"></el-table-column>
            </el-table>
        </div>
        <div class="item-content-two" >
          <p>说明：</p>
          <p>1. 日期：数据统计日期，T+1日凌晨统计T日的信息，日期显示为T日。</p>
          <p>2. 余额：截至统计时间，此商户在资金自主管理系统内余额。</p>
          <p>3. 交易金额：在T日进入资金自主管理系统的交易流水的结算金额（T-1日发生的交易）。</p>
          <p>4. 交易手续费：在T日进入资金自主管理系统的交易流水的收单手续费（T-1日发生的交易）。</p>
          <p>5. 入金：在T日进入资金自主管理系统的交易流水的结算净额（T-1日发生的交易），以及在T日确认并结算的待处理流水的结算净额。</p>
          <p>6. 划付手续费：T日资金自主管理系统划付分账操作产生的划付/分账手续费。</p>
          <p>7. 出金：2号结算成功的金额（金额包含划付手续费）。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        baseurl:'',
        masknum: false, //弹窗控制参数
        examineData: "",//弹窗数据
        tableData: [],
        shxx: "",//搜索参数-商户信息
        shh: "",//搜索参数-商户号
        ywlx: "", //搜索参数-业务类型
        searchoptions2: [//业务类型
            { id: "1", name: "商超" },
            { id: "2", name: "酒店预定" },
            { id: "3", name: "直播带货" },
            { id: "4", name: "短信VIP充值" },
            { id: "6", name: "外卖" },
            { id: "7", name: "突突到家" },
            { id: "8", name: "电商" },
        ],
        //弹窗-查看
        timeArr:[],//
        pickerOptions: {
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        typeDetails:'',//类型数据
        searchoptions1:[//类型数据表
          { id: "1", name: "所有商户" },
          { id: "2", name: "当前商户" }
        ],
        //分页
        limit: 5,
        page: 1,
        total: 0,
        currentPage: 1,
    };
  },
  mounted() {
    this.baseurl=this.$store.state.baseurlfz
    this.getCoupon();
  },
  methods: {
    //获取商户台账查询
    getCoupon() {
      var urlsearch='&shxx='+this.shxx+'&shh='+this.shh+'&ywlx='+this.ywlx
      this.axios({
        url: this.baseurl + "/shtzcx/getShtzcx?limit="+this.limit+'&page='+this.page + urlsearch,
        method: "get",
      }).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        } else {
          alert(res.data.errmsg);
        }
      });
    },
    //查询
    searchClick(){
        this.limit=5
        this.page=1
        this.getCoupon()
    },
    //清空
    emptyClick(){
        this.shxx=''
        this.shh=''
        this.ywlx=''
        this.limit=5
        this.page=1
        this.getCoupon()
    },
    //下载
    downloadClick(){

    },
     // 查看
    examine(row) {
      this.masknum = true;
      this.examineData = row;
    },
    // 取消
    cancel() {
      this.masknum = false;
      this.examineData = "";
    },
    //分页
    handleSizeChange(val) {
      this.limit = val;
      this.getCoupon();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCoupon();
    },
    //处理时间戳
    format(shijianchuo) {
      var time = new Date(shijianchuo * 1000);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var f = time.getMinutes();
      var s = time.getSeconds();
      //想要什么格式可以自己改
      // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
      return y + "-" + m + "-" + d + " " + this.add0(h) + ":" + this.add0(f);
    },
    //小于10的时候，前边加0（08：08：12）
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
  },
  watch: {
  },
};
</script>

<style scoped>
.coupon > h5 {
  display: flex;
  justify-content: space-between;
}
.coupon-header {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* 搜索input框 */
.search-inp {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.search-inp .item {
  /* width: 330px; */
  margin-bottom: 6px;
  display: flex;
}
.search-inp .item-text {
  width: 88px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
.search-inp input{
    width: 200px;
}
.button-box{
    margin-top: 20px;
    margin-left:20px;
}
.tabs {
    margin-top: 40px;
    padding-left: 20px;
}

/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.content {
  width: 60vw;
  min-width: 900px;
  max-height: 90vh;
  overflow: auto;
  background: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  padding: 30px;
}
.item-content {
  margin-top: 10px;
  margin-bottom: 30px;
}
.item-content-two p{
  margin: 5px 0;
}
.item-left,
.item-right {
  display: inline-block;
  width: 47%;
}
.item-left .item :nth-child(1) {
  width: 150px;
  text-align: right;
  display: inline-block;
  margin-right: 5px;
}
.item-right .item :nth-child(1) {
  width: 150px;
  text-align: right;
  display: inline-block;
}
.item span,.my-top {
  margin-top: 10px;
}
.remark {
  display: flex;
  align-items: flex-start;
}
.content1-list{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 30px;
}
</style>
<style>
.el-date-editor .el-range-separator {
  width: 10% !important;
  
}
.search-inp .el-input__inner{
    width: 200px;
}
.el-pagination{
    margin-top: 20px;
    text-align: right;
}
.content1 .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
    width: 245px;
}
.content1 .el-select{
  width: 150px;
}
</style>
